<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button type="success" @click="addServiceUser">添加<i class="el-icon-plus el-icon--right"></i></el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 99%">

      <el-table-column align="center" label="账号">
        <template slot-scope="scope">
          <span>{{scope.row.account}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="email">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="手机号">
        <template slot-scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="账号类型">
        <template slot-scope="scope">
          <span>{{scope.row.type === '1' ? '制作员' : '业务员'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="询盘">
        <template slot-scope="scope">
          <span>{{scope.row.inquiry}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="状态">
        <template slot-scope="scope">
          <el-tag>{{scope.row.status === '0' ? '禁用' : '启用'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="handleEditDetail(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deletes(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="0">女</el-radio>
            <el-radio label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账号类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="1">制作员</el-radio>
            <el-radio label="2">业务员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="form.department" placeholder="部门"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="form.position" placeholder="职位"></el-input>
        </el-form-item>
        <el-form-item label="主图:" prop="headPortrait">
          <el-upload class="avatar-uploader" action="/app/sys/oss/upload" :show-file-list="false"
                     :on-success="handleAvatarSuccess">
            <img v-if="form.headPortrait" :src="form.headPortrait" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="update('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryServiceList, deleteServiceUser, addServiceuser } from '@/api/role'
  import waves from '@/directive/waves/index.js' // 水波纹指令

  export default {
    name: 'seller_index',
    directives: {
      waves
    },
    data() {
      return {
        list: null, // 列表数据
        total: null, // 总条数
        listLoading: true, // loading
        listQuery: { // 请求参数
          pageNo: 1,
          pageSize: 10
        },
        dialogStatus: '', // 状态
        textMap: {
          update: '编辑',
          create: '创建'
        },
        form: {}, // 表单数据
        rules: {
          account: [
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur'
            }
          ],
          email: [
            {
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            }
          ],
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }
          ],
          sex: [
            {
              required: true,
              message: '请选择性别',
              trigger: 'blur'
            }
          ],
          type: [
            {
              required: true,
              message: '请选择账号类型',
              trigger: 'blur'
            }
          ],
          phone: [
            {
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            }
          ],
          department: [
            {
              required: true,
              message: '请输入部门',
              trigger: 'blur'
            }
          ],
          position: [
            {
              required: true,
              message: '请输入职位',
              trigger: 'blur'
            }
          ],
          headPortrait: [
            {
              required: true,
              message: '请上传头像',
              trigger: 'blur'
            }
          ]
        },
        dialogFormVisible: false, // 详情显示
        tableKey: 0
      }
    },
    created() {
      this.getList()
    },
    methods: {
      filterJavaTime(str) {
        const times = new Date(str).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        // const times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
        return times.substring(0, 11)
      },
      getList() {
        // const that = this
        this.listLoading = true;
        queryServiceList(this.listQuery).then(response => {
          this.list = response.data.data.records
          this.total = response.data.data.total
          this.listLoading = false
        });
      },
      handleSizeChange(val) { // 页面大小切换
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) { // 页码切换
        this.listQuery.pageNo = val
        this.getList()
      },
      addServiceUser() { // 新增
        this.form = {}
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleAvatarSuccess(res) {
        this.form.headPortrait = res.data
      }, // 头像上传
      handleEditDetail(row) { // 查看详情
        this.statusText = 'update'
        this.form = row
        this.dialogFormVisible = true
      },
      cancel(formName) { // 取消
        this.dialogFormVisible = false
        this.$refs[formName].resetFields()
      },
      update() {
        const that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            delete this.form.createTime
            delete this.form.updateTime
            delete this.form.inquiry
            delete this.form.status
            if (this.statusText === 'create') {
              delete this.form.id
            }
            addServiceuser(that.form).then((res) => {
              that.$message({
                message: '添加成功',
                type: 'success'
              })
              this.dialogFormVisible = false
              that.getList()
            })
          } else {
            return false
          }
        })
      },
      deletes(row) {
        this.$confirm(
          '此操作将永久删除, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          deleteServiceUser(row.id).then(res => {
            this.getList()
          })
        })
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
<style scoped>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
</style>
